<template>
  <div style="position: relative">
    <div style="position: absolute;top:100px;left:100px">
      <p>用户账号：<el-input v-model="number" placeholder="请输入账号" class="a1"></el-input></p>
      <p>登陆密码：<el-input v-model="password" placeholder="请输入密码" class="a1" type="password"></el-input></p>
      <p>主要部门：<el-cascader :options="section" clearable @change="sect" placeholder="请选择部门"></el-cascader></p>
      <p>角色分配：
        <el-select v-model="value" placeholder="请选择用户角色" @change="leve">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select></p>
      <br>
      用户排序：<p>
      <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
    </p>
      <p>用户密级：<el-input v-model="from.level" placeholder="请输入用户密级" class="a1"></el-input></p>
      <p>&emsp;QQ号：<el-input v-model="from.QQ" placeholder="请输入QQ号" class="a1"></el-input></p>
      <p>&emsp;性别：<el-input v-model="from.sex" placeholder="请选择性别" class="a1"></el-input></p>
      <p>手机号码：<el-input v-model="from.mobile" placeholder="请输入手机号码" class="a1"></el-input></p>
      <p>是否是实体用户：
        <el-radio v-model="from.entity_user" label="1">实体用户</el-radio>
        <el-radio v-model="from.entity_user" label="2">虚拟用户</el-radio>
      </p>
    </div>
    <div style="position: absolute;top:100px;left:900px">
      <p>用户姓名：<el-input v-model="from.name" placeholder="请输入姓名" class="a1"></el-input></p>
      <p>确认密码：<el-input v-model="password1" placeholder="请重新输入登陆密码" class="a1"></el-input></p>
      <p>&emsp;&emsp;工号：<el-input v-model="from.job_number" placeholder="请输入工号" class="a1"></el-input></p>
      <p>岗位分配：<el-select v-model="value" placeholder="请选择岗位" @change="post1">
        <el-option
            v-for="item in post"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select></p>
      <p>&emsp;&emsp;头像：<input type="file" id="pic" @change="img1"></p>
      <p>&emsp;&emsp;生日：<input type="date" v-model="from.birthday"></p>
      <p>&emsp;&emsp;邮箱：<el-input v-model="from.mailbox" placeholder="请输入邮箱" class="a1"></el-input></p>
      <p>&emsp;&emsp;座机：<el-input v-model="from.special_plane" placeholder="请输入座机" class="a1"></el-input></p>
    </div>
    <div style="position: absolute;right: 200px;top:900px">
      <button @click="over" style="height: 30px;width: 100px;background-color: white;">关闭</button>
      <button @click="post_use" style="border: none;background-color: #2f54eb;width: 100px;height: 30px;color: white;margin-left: 20px">确定</button>
    </div>

  </div>
</template>

<script>
import maxios from "@/http/axios";

export default {
name: "add_user",
  data(){
    return{
      number:localStorage.getItem('username'),
      password:localStorage.getItem('password'),
      password1:'',
      num:1,
      from:{'account_number':'','name':'',"texture":'','type':'1','order':'','level':'1','QQ':'','sex':'','mobile':'','job_number':'','post':'','img':'','birthday':'','mailbox':'','special_plane':'','entity_user':'1'},
      // from:{'name':'','sex':'','mobile':'','account_number':'','job_number':'','mailbox':''},
      options: [],
      value:'',
      section:[],
      post:[],
      img:'',
    }
  },
  methods:{
    handleChange(value){
      this.from.order = value
    },
    post_use(){
      if(this.password1==this.password){
        maxios('/user/add','post',this.from).then(res=>{
          if(res.code==200){
            this.$toast.success('添加成功')
          }
        })
      }
    },
    leve(value){
      this.from.type = value
    },
    over(){
      this.$router.push('/users')
    },
    role(){
      maxios('/user/role','get').then(res=>{
        if(res.code==200){
          this.options = res.role
          this.section = res.rection
          this.post = res.post
        }
      })
    },
    sect(value){
      let list = []
      for(let i in value){
        list.push(value[i])
      }
      this.form.texture = list
    },
    post1(value){
      this.from.post = value
    },
    img1(){
      let pic = document.getElementById('pic').files[0]
      this.from.img = pic
    }
  },
  mounted() {
    this.role()
  }
}
</script>

<style scoped>
.a1{
  width: 500px;
  margin-top: 20px;

}
</style>